{extend name="common/layout" /}
{block name="main"}
<div class="admin-main fadeInUp animated" ng-app="hd" ng-controller="ctrl">
    <div style="position: relative;">
        <div id="mapIllustration" style="width: 100%;height: 700px;">
            
        </div>
        <div style="position: absolute;top: 15px;left: 15px;z-index: 99999999">
            <form class="layui-form" action="" id="_form">
                <div class="layui-form-item layui-search">
                    <div class="layui-input-inline" >
                      <select name="cloud_id" class="layui-search-select" lay-filter="cloudlist" id="cloud_id" data-aid="#country">
                        <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($clouds as $vo):?>
                    <option value="{$vo['id']}" data-icon="{$vo['icon']}">{$vo['name']}</option>
                        <?php endforeach;?>
                      </select>
                    </div>
                    <div class="layui-input-inline">
                      <select name="country_id" class="layui-search-select" id="country" lay-filter="countryId" data-aid="#city">
                        
                      </select>
                    </div>
                    <div class="layui-input-inline" style="margin-right: -1px;">
                      <select name="city_id" id="city" lay-filter="cityId">
                        
                      </select>
                    </div>
                    <div class="layui-input-inline" >
                      <button class="layui-btn search layui-search-btn borderrad5" style="padding: 0 12px;" lay-filter="search" type="button"><i class="layui-icon">&#xe615; </i> </button>
                    </div>
                  </div>
            </form>
            <div class="pop-list">
            <ul id="list-deom">
              
            </ul>
        </div>
        </div>
        
    </div>
    
</div>
{/block}
{block name="footer"}
<script src="/static/plugins/echart/echarts.min.js"></script>
<script src="/static/plugins/echart/world.js"></script>
<script src="/static/plugins/echart/map.js"></script>
<script>
    var locale = "zh-CN";
    var cities = {};
    var lng =0,lat = 0;
    var name='';             
    $("#mapIllustration").MapIllustration(cities);
    function inArray(str,arr){
       for(k in arr){
          if(arr[k] == str){
             return true
          }
       }
       return false;
    }
    var lat = 0;
    var name='';
        var lng = 0;
        layui.use(['form', 'layer'], function () {
            var form = layui.form, layer = layui.layer,$= layui.jquery;
            $(".search").on('click', function (data) {
                loading = layer.load(1,{shade:[0.1,'#fff']});
                $("#list-deom").html('');
                $("#list-deom").css({height:"0px"});
                
                 var height = 0;
                $.post("{:U('getCloudItems')}", $("#_form").serialize(), function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        $.each(res.items,function(i,item){
                            $("#list-deom").append("<li class='cloud-ionc'><b>"+item.name+"</b></li>");
                            height += 50;
                        })
                        var _listHrigth = $(document).height()-280;
                        if(_listHrigth < height ){
                            height = _listHrigth;
                        }
                        $("#list-deom").animate({height:height+"px"});
                        cities = [{name:name,latitude:lat,longitude:lng,items:[]}];
                        $("#mapIllustration").MapIllustration(cities,{
                            roam:false,
                            zoom:3,
                            center:[lng,lat]
                        });
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            })
            /*本端pop点切换*/
            form.on("select(cloudlist)",function(obj){
                var doem = obj.elem.dataset.aid;
                var value = obj.elem.dataset.value;
                loading = layer.load(1,{shade:[0.1,'#fff']});
                $.post("{:U('getClouList')}",{pid:obj.value},function(res){
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    layer.close(loading);
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                $(doem).append("<option value='"+item.id+"' selected data-icon='"+item.icon+"'>"+item.name+"</option")
                            }else{
                                $(doem).append("<option value='"+item.id+"' data-icon='"+item.icon+"'>"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                },'json')
            })
            /*本端pop点切换*/
            form.on("select(countryId)",function(obj){
                var doem = obj.elem.dataset.aid;
                var value = obj.elem.dataset.value;
                loading = layer.load(1,{shade:[0.1,'#fff']});
                $.post("{:U('getCloudCity')}",{country_id:obj.value,cloud_id:$("#cloud_id").val(),},function(res){
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    layer.close(loading);
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                $(doem).append("<option data-name='"+item.name+"' value='"+item.id+"' selected data-lng='"+item.lng+"' data-lat='"+item.lat+"' >"+item.name+"</option")
                            }else{
                                $(doem).append("<option data-name='"+item.name+"' value='"+item.id+"' data-lng='"+item.lng+"' data-lat='"+item.lat+"' >"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                },'json')
            })
            form.on("select(cityId)",function(obj){
                var opt = obj.elem.selectedOptions
                 lat = opt[0].dataset.lat;
                 lng = opt[0].dataset.lng;
                 name = opt[0].dataset.name;
                
            })
        });
</script>
{/block}